﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <title></title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/upload/css/bjstyle.css}"/>
    <script type="text/javascript" src="../static/upload/js/jquery-1.8.2.min.js"></script>

</head>
<body>


<div id="background" class="wall"></div>
<div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div>
<div id="top" class="wall"></div>
<div class="main">
    <div th:if="${row}==1" id="nogg" class="ts">上传成功</div>
    <div th:if="${row}==2" id="nogg" class="ts">上传失败</div>
    <div class="left">
        <form id="form" action="/upload" method="post" enctype="multipart/form-data">
            <input name="userid" type="hidden" th:value="${userId}">
            <div>
                <p>请输入歌曲名：</p>
                <input id="musicName" type="text" name="musicname">
                <p>请输入歌曲简介：</p>
                <textarea name="description" id="description" cols="23" rows="3"></textarea>
            </div>
            <div class="musiccode">
                <p>请选择歌曲类型：</p>
                <select name="style">
                    <option value ="volvo"th:each="code:${musicCode}" th:value="${code.id}" th:text="${code.name}" ></option>
                </select>
            </div>
            <div class="music">
                <p>请选择歌曲：</p>
                <input id="text" type="file" onchange="musicFile()" name="address"><br>
            </div>

            <div class="picqer">
                <p>请选择歌曲封面：</p>
                <input id="img" type="file" onchange="previewFile()" th:value="歌曲封面" name="img"><br>
                <img src="" class="images" alt=""/>
            </div>
            <button id="submit" type="submit" class="submit butt"  >上传</button>
        </form>
    </div>

    <div class="right">
        <audio id="audio" controls="controls" autoplay="autoplay">
        </audio>
    </div>


</div>


</body>
<script>
    $("#submit").click(function () {
        var musicName =$("#musicName").val()
        var description =$("#description").val()
        var text =$("#text").val()
        var img =$("#img").val()
        if (musicName=="") {
            alert("请输入歌曲名")
            return false
        }else if (description=="") {
            alert("请输入歌曲介绍")
            return false
        }else if (text=="") {
            alert("请选择歌曲文件")
            return false
        }else if (img=="") {
            alert("请选择歌曲封面")
            return false
        }else {
            $("#submit").attr('disabled',"true")
            $("#submit").submit()
        }

    })


    setTimeout(function(){document.getElementById("nogg").style.display="none";},2000);
    function previewFile() {
        var preview = document.querySelector('img');
        var file = document.querySelector("#img").files[0];
        var reader = new FileReader();
        reader.onloadend = function () {
            preview.src = reader.result;
        }
        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = "";
        }
    }


    function musicFile() {
        var audio = document.querySelector('audio');
        var file = document.querySelector('#text').files[0];
        var reader = new FileReader();
        reader.onloadend = function () {
            audio.src = reader.result;
        }
        if (file) {
            reader.readAsDataURL(file);
        } else {
            audio.src = "";
        }
    }
    // function musicupload() {
    //     //获得整个form
    //     var form = new FormData(document.getElementById("form"));
    //     console.log(form+"11111")
    //     //form追加提交的数据
    //     form.append("userId", 32);
    //     $.ajax({
    //         url: "/upload",
    //         type: 'POST',
    //         data: form,
    //         contentType: false, //不指定提交数据类型
    //         processData: false, //提交数据不做处理
    //         success: function (returndata) {
    //             console.log(returndata);
    //             // var result = JSON.parse(returndata);
    //             // 判断逻辑
    //         }
    //     });
    // }


</script>
</html>